<template>
  <div class="home-container">
    <div class="slide">
      <el-carousel height="550px" indicator-position="outside">
        <el-carousel-item v-for="item in 4" :key="item">
          <h3>{{ item }}</h3>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="child-info">
      <div>
        <div class="info-title">学院概况</div>
        <div class="info-content">艺术设计学院成立于1985年。作为广州工程技术职业学院的二级分院，三十多年来秉承中国艺术设计教育的务实创新精神、以立品、为学、禀艺、砺身为院训，潜心培育，辛勤耕耘，毕业生业绩显赫。多年以来，学院构建了一支老、中、青相结合的双师型师资队伍，除此以外，学院聘请了多名国内外具有丰富实践经验的知名设计专家作为客座教授，形成了一支非常稳定的专兼师相结合的双师型教师队伍。</div>
        <div class="info-content">学院的专业设置注重以市场为导向，以就业为目标，目前开设了广告设计与制作、服装与服饰设计、环境艺术设计、数字媒体艺术设计四大专业，在校学生人数800余人。历年来毕业生总体就业率均超出全省同类型院校总体就业率的平均水平，近五年毕业生总体就业率达到95％。</div>
        <div class="more-option">
          <div class="more-container">
            <span>更多</span>
            <i class="more-icon" aria-label="icon: right">
              <svg viewBox="64 64 896 896" focusable="false" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true">
                <path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path>
              </svg>
            </i>
          </div>
        </div>
      </div>
    </div>
    <div class="child-intro">
      <div class="intro-top">
        <span class="text-left">专业介绍</span>
        <span class="text-right">Introduction</span>
      </div>
      <div class="intro-bottom">
        <div class="bottom-container">
          <div class="container-left">
            <img class="left-img" src="" alt="">
          </div>
          <div class="container-right">
            <div>
              <ul>
                <li>
                  <span>
                    <b>服装与服饰设计专业</b>
                    是为适应高等职业院校发展的需求及对创意产业人才培养的需求而开设的专业。根据教学与市场要求，目前该专业设有校内实训工作室和工艺实训室，拥有完善的服装工艺制版、服装成衣制作的设备，师资力量雄厚。
                  </span>
                </li>
                <li>
                  <span>
                    <b>广告设计与制作专业</b>
                    采取理论与实践相结合的教学方法，以课程“项目化”教学为中心，采用“以赛促学、以赛促教、学赛结合”教学模式，使学生通过三年的学习, 掌握从事广告设计与制作等相关职业岗位所必需的专业理论知识和职业技能。
                  </span>
                </li>
                <li>
                  <span>
                    <b>环境艺术设计专业</b>
                    是一个对建筑室内外的空间环境，通过艺术设计的方式进行整合设计的一门实用艺术。专业教学采用项目化教学和实训模式，使学生通过三年的学习, 掌握本专业所学的理论知识和职业技能。
                  </span>
                </li>
                <li>
                  <span>
                    <b>数字媒体艺术设计</b>
                    专业基于市场需求，构建了符合数字化创意设计岗位需求、专业技能人才成长规律的培养模式。以“工学结合、校企合作”为切入点，技能竞赛融入课程教学，企业项目融入毕业设计，有效提升了人才培养质量和服务数字文化产业发展能力，为珠三角地区文化创意产业的蓬勃发展输送了大批合格人才。
                  </span>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="more-option">
          <div class="more-container">
            <span>更多</span>
            <i class="more-icon" aria-label="icon: right">
              <svg viewBox="64 64 896 896" focusable="false" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true">
                <path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path>
              </svg>
            </i>
          </div>
        </div>
      </div>
    </div>
    <div class="child-studio">
      <div class="container-top">
        <span class="top-text-left">数字化创意设计工作室</span>
        <span class="top-text-right">Creative Design</span>
      </div>
      <div class="list-container">
        <div class="list-loading">
          <div class="article-list">
            <ul class="list-items">
              <li class="item">
                <div class="item-container">
                  <div>
                    <i class="read-icon">
                      <svg viewBox="64 64 896 896" focusable="false" data-icon="read" width="1em" height="1em" fill="currentColor" aria-hidden="true">
                        <path d="M928 161H699.2c-49.1 0-97.1 14.1-138.4 40.7L512 233l-48.8-31.3A255.2 255.2 0 0 0 324.8 161H96c-17.7 0-32 14.3-32 32v568c0 17.7 14.3 32 32 32h228.8c49.1 0 97.1 14.1 138.4 40.7l44.4 28.6c1.3.8 2.8 1.3 4.3 1.3s3-.4 4.3-1.3l44.4-28.6C602 807.1 650.1 793 699.2 793H928c17.7 0 32-14.3 32-32V193c0-17.7-14.3-32-32-32zM324.8 721H136V233h188.8c35.4 0 69.8 10.1 99.5 29.2l48.8 31.3 6.9 4.5v462c-47.6-25.6-100.8-39-155.2-39zm563.2 0H699.2c-54.4 0-107.6 13.4-155.2 39V298l6.9-4.5 48.8-31.3c29.7-19.1 64.1-29.2 99.5-29.2H888v488zM396.9 361H211.1c-3.9 0-7.1 3.4-7.1 7.5v45c0 4.1 3.2 7.5 7.1 7.5h185.7c3.9 0 7.1-3.4 7.1-7.5v-45c.1-4.1-3.1-7.5-7-7.5zm223.1 7.5v45c0 4.1 3.2 7.5 7.1 7.5h185.7c3.9 0 7.1-3.4 7.1-7.5v-45c0-4.1-3.2-7.5-7.1-7.5H627.1c-3.9 0-7.1 3.4-7.1 7.5zM396.9 501H211.1c-3.9 0-7.1 3.4-7.1 7.5v45c0 4.1 3.2 7.5 7.1 7.5h185.7c3.9 0 7.1-3.4 7.1-7.5v-45c.1-4.1-3.1-7.5-7-7.5zm416 0H627.1c-3.9 0-7.1 3.4-7.1 7.5v45c0 4.1 3.2 7.5 7.1 7.5h185.7c3.9 0 7.1-3.4 7.1-7.5v-45c.1-4.1-3.1-7.5-7-7.5z">
                        </path>
                      </svg>
                    </i>
                    谭展鹏黄敏健广绣大师工作室
                  </div>
                  <div>
                    <div class="more">
                      <span>更多</span>
                      <i class="more-icon" aria-label="icon: right">
                        <svg viewBox="64 64 896 896" focusable="false" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true">
                          <path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path>
                        </svg>
                      </i>
                    </div>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="child-honor">
      <div class="honor-top">
        <span class="top-left">荣誉榜</span>
        <span class="top-right">Honor</span>
      </div>
      <div class="honor-bottom">
        <div class="bottom-header">
          <div class="header-container">
            <div class="container-img"><img src="" alt=""></div>
            <div class="container-img"><img src="" alt=""></div>
            <div class="container-img"><img src="" alt=""></div>
            <div class="container-img"><img src="" alt=""></div>
            <div class="container-img"><img src="" alt=""></div>
            <div class="container-img"><img src="" alt=""></div>
          </div>
        </div>
        <div class="bottom-footer">
          <div class="footer-container">
            <span>更多</span>
            <i class="more-icon" aria-label="icon: right">
              <svg viewBox="64 64 896 896" focusable="false" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true">
                <path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path>
              </svg>
            </i>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import Studio from '@/pages/home/Index/Studio.vue'
  export default {
    data() {
      return {

      }
    },
    components: {
      Studio
    }
  }
</script>

<style lang="scss" scoped>
  .el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
  .child-info {
    background-color: #ffde7d;
    width: 100%;
    padding: 20px;
    div {
      background-color: #ffebb1;
      padding: 20px;
      border-radius: 20px;
      .info-title {
        color: rgba(0, 0, 0, 0.6);
        text-align: center;
        font-size: 24px;
        font-weight: 700;
        margin: 0;
      }
      .info-content {
        color: rgba(0, 0, 0, 0.6);
        width: 70%;
        margin: 20px auto;
        font-size: 14px;
      }
      .more-option {
        color: rgba(0, 0, 0, 0.6);
        display: flex;
        justify-content: flex-end;
        width: 70%;
        margin: 20px auto;
        font-size: 14px;
        .more-container {
          cursor: pointer;
          width: max-content;
          font-weight: 400;
          .more-icon {
            margin-left: 10px;
            display: inline-block;
            color: inherit;
            font-style: normal;
            line-height: 0;
            text-align: center;
            text-transform: none;
            vertical-align: -.125em;
            text-rendering: optimizeLegibility;
          }
        }
      }
    }
  }
  .child-intro {
    width: 1024px;
    height: 350px;
    margin: 30px auto;
    .intro-top {
      color: rgba(0, 0, 0, 0.6);
      font-size: 20px;
      margin-bottom: 24px;
      .text-left {
        margin-right: 20px;
        font-weight: 700;
      }
      .text-right {
        font-size: 16px;
        padding: 4px 12px;
        background-color: #ffde7d;
        border-radius: 4px;
      }
      .text-right::before {
        content: "/";
        margin-right: 4px;
      }
    }
    .intro-bottom {
      min-height: 80px;
      padding: 0 0 12px;
      .bottom-container {
        position: relative;
        height: auto;
        margin-right: 0;
        margin-left: 0;
        display: block;
        box-sizing: border-box;
        .container-left {
          padding: 0 8px;
          display: block;
          box-sizing: border-box;
          width: 33.33333333%;
          flex: 0 0 auto;
          float: left;
          min-height: 1px;
          .left-img {
            margin-top: 50px;
            width: 100%;
          }
        }
        .container-right {
          color: rgba(0, 0, 0, 0.6);
          padding: 0 8px;
          font-size: 14px;
          display: block;
          box-sizing: border-box;
          width: 66.66666667%;
          flex: 0 0 auto;
          float: left;
          min-height: 1px;
        }
      }
      .more-option {
        color: rgba(0, 0, 0, 0.6);
        display: flex;
        justify-content: flex-end;
        width: 70%;
        margin: 20px 0 20px 300px;
        font-size: 14px;
        .more-container {
          cursor: pointer;
          width: max-content;
          font-weight: 400;
          .more-icon {
            margin-left: 10px;
            display: inline-block;
            color: inherit;
            font-style: normal;
            line-height: 0;
            text-align: center;
            text-transform: none;
            vertical-align: -.125em;
            text-rendering: optimizeLegibility;
          }
        }
      }
      .bottom-container::before {
        display: table;
        content: "";
      }
      .bottom-container::after {
        display: table;
        content: "";
      }
    }
  }
  .child-studio {
    width: 1024px;
    margin: 30px auto;
    .container-top {
      font-size: 20px;
      margin-bottom: 24px;
    
      .top-text-left {
        color: rgba(0, 0, 0, 0.6);
        margin-right: 20px;
        font-weight: 700;
      }
    
      .top-text-right {
        color: rgba(0, 0, 0, 0.6);
        font-size: 16px;
        padding: 4px 12px;
        background-color: #ffde7d;
        border-radius: 4px;
      }
    
      .top-text-right::before {
        content: "/";
        margin-right: 4px;
      }
    }
    
    .list-container {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      color: rgba(34,40,49,.65);
      font-size: 14px;
      font-variant: tabular-nums;
      line-height: 1.5;
      list-style: none;
      font-feature-settings: "tnum","tnum";
      position: relative;
      * {
        outline: none;
      }
      .list-loading {
        position: relative;
        .article-list {
          position: relative;
          transition: opacity .3s;
          .list-items {
            margin: 0;
            padding: 0;
            list-style: none;
            .item {
              border-bottom: 1px solid #e8e8e8;
              display: flex;
              align-items: center;
              justify-content: space-between;
              padding: 12px 0;
              .item-container {
                display: flex;
                justify-content: space-between;
                transition: all .5s;
                width: 100%;
                padding: 8px 12px;
                font-weight: 700;
                border-radius: 10px;
                .read-icon {
                  margin-right: 20px;
                  display: inline-block;
                  color: inherit;
                  font-style: normal;
                  line-height: 0;
                  text-align: center;
                  text-transform: none;
                  vertical-align: -.125em;
                  text-rendering: optimizeLegibility;
                }
                .more {
                  cursor: pointer;
                  width: max-content;
                  font-weight: 400;
                  color: rgba(0, 0, 0, 0.6);
                  .more-icon {
                    margin-left: 10px;
                    display: inline-block;
                    color: inherit;
                    font-style: normal;
                    line-height: 0;
                    text-align: center;
                    text-transform: none;
                    vertical-align: -.125em;
                    text-rendering: optimizeLegibility;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  .child-honor {
    width: 1024px;
    margin: 30px auto;
    .honor-top {
      font-size: 20px;
      margin-bottom: 24px;
      color: rgba(0, 0, 0, 0.6);
      .top-left {
        margin-right: 20px;
        font-weight: 700;
      }
      .top-right {
        font-size: 16px;
        padding: 4px 12px;
        background-color: #ffde7d;
        border-radius: 4px;
      }
      .top-right::before {
        content: "/";
        margin-right: 4px;
      }
    }
    .honor-bottom {
      min-height: 80px;
      padding: 0 0 12px;
      .bottom-header {
        .header-container {
          width: 100%;
          display: flex;
          justify-content: space-between;
          .container-img {
            width: 165.667px;
            height: 100px;
            background: red;
          }
        }
      }
      .bottom-footer {
        display: flex;
        justify-content: flex-end;
        font-size: 14px;
        color: rgba(0, 0, 0, 0.6);
        .footer-container {
          cursor: pointer;
          width: max-content;
          font-weight: 400;
          .more-icon {
            margin-left: 10px;
            display: inline-block;
            color: inherit;
            font-style: normal;
            line-height: 0;
            text-align: center;
            text-transform: none;
            vertical-align: -.125em;
            text-rendering: optimizeLegibility;
          }
        }
      }
    }
  }
</style>
